<div ms-controller="appoint" id="page_appoint" ms-visible="nowPage=='appoint'">

    <style>
        #page_appoint header {
            background-color: #383431;
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            color: white;
            text-align: center;
            z-index: 999;
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
        }

        #page_appoint header > b {
            display: block;
            margin-top: 10px;
        }

        #page_appoint .icon-back {
            left: 7px;
            margin-top: 7px;
            float: left;
            vertical-align: middle;
        }

        #page_appoint .oneBox.info {
            min-height: 90px;
        }

        #page_appoint .oneBox {
            margin-bottom: 10px;
            background-color: white;
            border-bottom: solid 1px #e2e2e2;
        }

        #page_appoint .avatar + div {
            padding: 10px 0 0 0;
            margin: 0 20px 10px 110px;
        }

        #page_appoint h1 {
            color: #888;
        }

        #page_appoint p {
            padding-top: 10px;
            color: #1a1a1a;
        }

        #page_appoint .avatar {
            vertical-align: top;
            display: inline-block;
            margin: 10px 15px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
        }

        #page_appoint .avatar > img {
            width: 70px;
            height: 70px;
        }

        #page_appoint .f-line {
            background-color: white;
            border-top: solid 1px #e2e2e2;
            width: 100%;
            height: 50px;
        }

        #page_appoint .f-label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            color: #1a1a1a;
            padding: 10px 5px 10px 20px;
        }

        #page_appoint .f-text {
            width: calc(100% - 120px);
            vertical-align: top;
            padding: 10px 5px 0px 0;
            display: inline-block;
            color: #1a1a1a;
        }

        #page_appoint .f-text > label {
            margin: 0 10px 0 0;
        }

        #page_appoint .timeAr {
            width: calc(100% - 120px);
            vertical-align: top;
            display: inline-block;
            color: #1a1a1a;
        }

        #page_appoint select:first-child {
            border-bottom: solid 1px #e2e2e2;
        }

        #page_appoint select {
            padding: 10px 0;
            margin-left: -5px;
            display: block;
            background-color: white

        }

        #page_appoint select > option:first-child {
            background-color: white
        }

        #page_appoint .btn-getVec {
            position: absolute;
            float: right;
            text-align: center;
            padding: 11px 10px;
            margin-top: 5px;
            margin-right: 0px;
            width: 75px;
            right: 9px;
            border-radius: 1px;
            border: solid 1px #ff7520;
            color: #ff7520;
        }

        #page_appoint .preNodegetVec {
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            max-width: 640px;
        }

        #page_appoint .btn-getVec.un {
            border-radius: 1px;
            border: solid 1px #dddddd;
            color: #aaaaaa;
        }

        #page_appoint .btn-normal {
            background-color: #ff7520;
            color: white;
            text-align: center;
            padding: 10px;
            width: 100%;
            position: fixed;
            bottom: 0;
            max-width: 640px;
        }

        #page_appoint .btn-normal:active {
            border: solid 2px #ff7520;
            background-color: #ff7520;
            color: white;
        }

        #page_appoint .input::-webkit-input-placeholder {
            color: #bdbdbd;
            font-size: 14px;
            height: 34px;
        }

    </style>

    <header ms-if="!fromapp">
        <a href="#!/card" class="icon-back p-a"></a>
        <b class="f36">预约</b>
    </header>

    <div class="blank" style="height:45px;" ms-if="!fromapp"></div>
    <div class="oneBox info">
        <div class="avatar p-a">
            <img ms-src="avatar"/>
        </div>
        <div>
            <h1 class="f32">{{nickname}}</h1>
            <p class="f28">{{faith|html}}</p>
            <p class="f28">{{address}}</p>
        </div>
    </div>

    <div class="oneBox">
        <div class="f-line">
            <div class="f28 f-label">姓名</div>
            <input class="f28 f-text input" type="text" ms-duplex="name" placeholder="如：王先生" maxlength="8">
        </div>
        <div class="f-line">
            <div class="f28 f-label">联系方式</div>
            <input class="f28 f-text input" type="tel" ms-duplex="phonenum" placeholder="填写手机号" maxlength="11">
        </div>
        <div class="f-line">
            <div class="preNodegetVec">
                <div class="f28 btn-getVec" ms-click="vec$get" ms-class-un="phonenum.length!=11||vec$rem>0"
                     ms-visible="vec$rem==0">获取验证码
                </div>
                <div class="f28 btn-getVec" ms-class-un="phonenum.length!=11||vec$rem>0" ms-visible="vec$rem!=0">
                    剩余{{vec$rem}}秒
                </div>
            </div>

            <div class="f28 f-label">验证码</div>
            <textarea class="f28 f-text input" type="tel" ms-duplex="vec" placeholder="手机号收到的验证码" maxlength="6"></textarea>
        </div>
    </div>

    <div class="oneBox">
        <div class="f-line">
            <div class="f28 f-label">预约日期</div>
            <div class="timeAr">
                <select id="apdate" class="f28" ms-duplex="date">
                    <option value=0 disabled="true">至少需提前一天预约</option>
                    <option ms-repeat="op$date" ms-attr-value="el.value">{{el.str}}</option>
                </select>
            </div>

        </div>

        <div class="f-line">
            <div class="f28 f-label">预约时间</div>
            <div class="timeAr">
                <select id="aptime" class="f28 " ms-duplex="time">
                    <option value=0 disabled="true" class="f28 f-text">预约时间</option>
                    <option ms-repeat="op$time" ms-attr-value="el.value">{{el.str}}</option>
                </select>
            </div>

        </div>

        <div class="f-line">
            <div class="f28 f-label">预约内容</div>
            <textarea class="f28 f-text input" ms-duplex="remark" placeholder="填写预约的服务内容" maxlength="64"></textarea>
        </div>
    </div>

    <div class="f32 btn-normal" ms-click="postOrder">提 交</div>

</div>